<div style="text-align: right; position: absolute; right: 25px">
  <button (click)="showModel()">🗄{{ store.currentLanguage.savemodel }}</button>
  <button (click)="createagg()">⭐{{ store.currentLanguage.create }}</button>
  <button (click)="saveagg()">🖪{{ store.currentLanguage.save }}</button>
  <button style="height: 23px; float: right; position: relative">
    <span>📂{{ store.currentLanguage.open }}</span>
    <input
      style="opacity: 0; width: 50px; margin-left: -50px; height: 35px"
      type="file"
      (change)="handleFileSelect($event)"
    />
  </button>

  <dx-popup
    [width]="500"
    [height]="250"
    [showTitle]="true"
    title="{{ store.currentLanguage.settingname }} "
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="popupVisible"
  >
    <div *dxTemplate="let data of 'content'">
      <input
        style="width: 70%"
        type="search"
        [(ngModel)]="store.aggregation.name"
        placeholder="输入名称"
      />
      <div style="margin: 10px; text-align: center">
        <button icon="check" (click)="confirm($evt)">
          {{ store.currentLanguage.ok }}
        </button>
        <button icon="close" (click)="cancel($e)">
          {{ store.currentLanguage.cancel }}
        </button>
      </div>
    </div>
  </dx-popup>

  <dx-popup
    [width]="500"
    [height]="250"
    [showTitle]="true"
    title="{{ store.currentLanguage.save }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="modelVisible"
  >
    <div>
      <app-modelinfo [(item)]="package"></app-modelinfo>
    </div>
    <div>
      <button (click)="saveModel()">{{ store.currentLanguage.save }}</button>
      <button (click)="cancelModel()">
        {{ store.currentLanguage.cancel }}
      </button>
    </div>
  </dx-popup>
</div>

<p>
  {{ store.currentLanguage.aggregationcommoncondition }}：<button
    (click)="addconditiongroup()"
  >
    +{{ store.currentLanguage.add }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.aggregationcommoncondition }}
  </button>
  <button *ngIf="combinedResult.length > 0" (click)="exportCombine()">
    ⤓{{ store.currentLanguage.combine }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.aggregation }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.export }}
  </button>
</p>

<ul *ngFor="let item of store.aggregation.conditionpipe" class="group">
  <!-- <h2>条件分组(Condition Group)</h2> -->
  <button style="margin-left: 0" (click)="removeGroup(item)">
    −{{ store.currentLanguage.remove }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.conditiongroup }}
  </button>
  <label>
    {{ store.currentLanguage.grouprelation }}:
    <select [(ngModel)]="item.relation">
      <option value="Union">{{ store.currentLanguage.union }}</option>
      <option value="Except">{{ store.currentLanguage.except }}</option>
      <option value="Intercect">{{ store.currentLanguage.intersect }}</option>
    </select>
  </label>
  <app-mrcondition
    [(currentlist)]="item.conditions"
    [showSelect]="false"
  ></app-mrcondition>
</ul>

<hr />

<p>
  {{ store.currentLanguage.aggregationitem }}：<button
    type="button"
    (click)="addstatistic()"
    class="search-icon"
  >
    +{{ store.currentLanguage.add }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.aggregationitem }}
  </button>
</p>

<section>
  <ul *ngFor="let statistic of store.aggregation.statistics" class="statistic">
    <button style="margin-left: 0" (click)="removeStatistic(statistic)">
      −{{ store.currentLanguage.remove }}{{ store.currentLanguage.space
      }}{{ store.currentLanguage.aggregationitem }}
    </button>
    <app-statistic
      [parentCollection]="store.aggregation.statistics"
      [current]="statistic"
    >
    </app-statistic>
  </ul>
</section>

<hr />
{{ store.currentLanguage.aggregationcalculation }}：
<input
  type="text"
  style="width: 50%; text-align: center"
  [(ngModel)]="store.aggregation.expression"
  placeholder="{{ store.currentLanguage.aggregationcalculation }}"
/>
<hr />
<div style="text-align: center; max-width: 1800px">
  <button type="button" (click)="aggregate()" style="margin-left: 15px">
    ▶{{ store.currentLanguage.aggregatebutton }}
  </button>

  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="store.aggregation.parameter.isMridMode"
  />{{ store.currentLanguage.mridmode }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="store.aggregation.parameter.distinctMrid"
  />{{ store.currentLanguage.mriddistinct }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="store.aggregation.parameter.strict"
  />{{ store.currentLanguage.strictasync }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="store.aggregation.parameter.sequence"
  />{{ store.currentLanguage.sequenceasync }}
</div>
<div *ngIf="aggResult.length > 0">
  <!-- <span>目标文档共：{{this.store.aggregationresult.totalhits}};</span> -->
  <span>总共花费时间：{{ this.store.aggregationresult.spends }};</span>
  <span *ngIf="haveResult()">最终运算结果是：{{ calculateresult }}</span>
  <button style="margin-left: 15px" (click)="export()">
    ⤓{{ store.currentLanguage.aggregation }}{{ store.currentLanguage.space
    }}{{ store.currentLanguage.export }}
  </button>
</div>

<div *ngFor="let result of aggResult">
  {{ result }}
</div>
<div style="width: calc(100vw - 60px); overflow: auto">
  <dx-data-grid
    *ngIf="includeCombine"
    [dataSource]="combinedResult"
    [showBorders]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
  >
    <!-- <dxi-column
      *ngFor="let item of store.resultObjectProperties"
      [dataField]="item"
      [caption]="item"
    ></dxi-column> -->
    <!-- [columnMinWidth]="50" [columnResizingMode]="columnResizingMode" -->
    <dxo-export
      [enabled]="true"
      fileName="{{ store.aggregation.name }}"
      [allowExportSelectedData]="true"
    ></dxo-export>
    <dxo-selection mode="multiple"></dxo-selection>
    <dxo-scrolling columnRenderingMode="virtual"></dxo-scrolling>
  </dx-data-grid>
  <div *ngIf="store.tableresults.length > 0">
    目标文档共：{{ this.store.tableresults.length }}
  </div>
</div>
<div>
  <button (click)="refreshChart()">绘图</button>
  <select [(ngModel)]="currentChartName">
    <option *ngFor="let item of statisticNameList" [value]="item">
      {{ item }}
    </option>
  </select>

  <br />
  <dx-chart *ngIf="currentChartName != undefined" [dataSource]="chartData">
    <dxi-series
      argumentField="label"
      valueField="data"
      name="currentChartName"
      type="bar"
      color="#ffaa66"
    >
    </dxi-series>
    <dxi-value-axis valueType="numeric"> </dxi-value-axis>
    <dxo-zoom-and-pan argumentAxis="both" valueAxis="both">
      <!-- or "zoom" | "pan" | "none" -->
    </dxo-zoom-and-pan>
  </dx-chart>
</div>
